<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="user-search">
        <el-form-item label="搜索：">
          <el-input
            size="small"
            v-model="formInline.classname"
            placeholder="课程名称"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-select
            class="se_input"
            v-model="formInline.classtype"
            placeholder="课程类别"
          >
            <el-option selected value="">请选择</el-option>
            <el-option value="管理类">管理类</el-option>
            <el-option value="项目类">项目类</el-option>
            <el-option value="技能类">技能类</el-option>
            <el-option value="其他类">其他类</el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select
            class="se_input"
            v-model="formInline.examethod"
            placeholder="考核方法"
          >
            <el-option selected value="">请选择</el-option>
            <el-option value="小组讨论">小组讨论</el-option>
            <el-option value="在线学习">在线学习</el-option>
            <el-option value="演讲授课">演讲授课</el-option>
            <el-option value="经验分享">经验分享</el-option>
            <el-option value="其他">其他</el-option>
          </el-select>
        </el-form-item>

        <el-form-item style="position: relative; left: 300px">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="search"
            >搜索</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-edit"
            @click="flush"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 新增，导出按钮 -->
      <el-form>
        <el-form-item>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="handlAdd"
            >新增</el-button
          >
          <el-button
            size="small"
            type="primary"
            icon="el-icon-upload el-icon--right"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 10px">
      <!--列表-->
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        border
        element-loading-text="拼命加载中"
        style="width: 100%"
      >
        <el-table-column fixed align="center" type="selection" width="60">
        </el-table-column>

        <el-table-column
          sortable
          prop="tranid"
          label="需求ID"
          fixed
          width="150"
        >
        </el-table-column>

        <el-table-column
          sortable
          fixed
          prop="organizationName"
          label="招聘机构"
          width="160"
        >
        </el-table-column>

        <el-table-column
          sortable
          prop="proposedtime"
          label="需求提出时间"
          width="160"
        >
        </el-table-column>

        <el-table-column sortable prop="priority" label="优先级" width="160">
        </el-table-column>

        <el-table-column sortable prop="classid" label="课程ID" width="110">
        </el-table-column>

        <el-table-column sortable prop="classname" label="课程名称" width="160">
        </el-table-column>

        <el-table-column sortable prop="examethod" label="考核方法" width="110">
        </el-table-column>

        <el-table-column sortable prop="traintime" label="预计课时" width="110">
        </el-table-column>

        <el-table-column
          sortable
          prop="personscope"
          label="参加人员范围"
          width="130"
        >
        </el-table-column>
        <el-table-column sortable prop="peponum" label="预计人数" width="110">
        </el-table-column>

        <el-table-column
          sortable
          prop="estimatedcost"
          label="预算费用"
          width="110"
        >
        </el-table-column>

        <el-table-column
          sortable
          prop="description"
          label="需求描述"
          width="110"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          min-width="200"
        >
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="deleteUser(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </div>
    <!-- 弹出界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="60%"
      @click="closeDialog"
    >
      <div style="display: flex; flex-direction: row">
        <div
          style="
            border-right: 2px cload #ccc;
            width: 45%;
            display: flex;
            justify-content: center;
          "
        >
          <el-form
            label-width="120px"
            :model="editForm"
            :rules="rules"
            ref="editForm"
          >
            <div>
              <el-form-item label="培训需求ID">
                <el-input
                  size="small"
                  v-model="editForm.tranid"
                  :disabled="true"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <el-form-item label="招聘机构" style="width: 300px">
                <div class="main">
                  <el-popover
                    class="select-tree"
                    placement="bottom-start"
                    trigger="click"
                    v-model="visible"
                    @hide="hidePopover"
                  >
                    <el-input
                      ref="input"
                      slot="reference"
                      placeholder="请选择"
                      v-model="text"
                      size="small"
                      clearable
                      @input="treeFilter"
                      @clear="clear"
                    />

                    <el-tree
                      ref="tree"
                      class="tree"
                      :data="hostdepartment"
                      :props="defaultProps"
                      :expand-on-click-node="false"
                      :filter-node-method="filterNode"
                      :node-key="hostdepartment.id"
                      @node-click="handleNodeClick"
                      current-node-key="findId"
                    />
                  </el-popover>
                </div>
              </el-form-item>
              <el-form-item label="优先级" prop="priority">
                <select
                  name=""
                  class="se_input"
                  v-model="editForm.priority"
                  style="width: 300px"
                >
                  <option selected value="">请选择</option>
                  <option value="高">高</option>
                  <option value="中">中</option>
                  <option value="低">低</option>
                </select>
              </el-form-item>
              <el-form-item label="培训课程ID" prop="cid">
                <el-input
                  size="small"
                  v-model="editForm.cid"
                  style="width: 300px"
                  @focus="CourseMethod()"
                >
                </el-input>
              </el-form-item>

              <el-form-item label="课程名称" prop="classname">
                <el-input
                  size="small"
                  v-model="editForm.classname"
                  auto-complete="off"
                  :disabled="true"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <el-form-item label="预计时长" prop="traintime">
                <el-input
                  size="small"
                  v-model="editForm.traintime"
                  auto-complete="off"
                  :disabled="true"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <el-form-item label="人员范围" prop="personscope">
                <el-input
                  size="small"
                  v-model="editForm.personscope"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="备注信息:"
                prop="description"
                style="width: 480px"
              >
                <el-input
                  type="textarea"
                  v-model="editForm.description"
                ></el-input>
              </el-form-item>
              <el-form-item label="提出时间" prop="proposedtime">
                <el-date-picker
                  type="datetime"
                  placeholder="选择时间"
                  v-model="editForm.proposedtime"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  style="width: 300px"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="培训方法" prop="examethod">
                <el-input
                  size="small"
                  v-model="editForm.examethod"
                  auto-complete="off"
                  :disabled="true"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <el-form-item label="预计人数" prop="peponum">
                <el-input
                  size="small"
                  v-model="editForm.peponum"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <el-form-item label="预计费用" prop="estimatedcost">
                <el-input
                  size="small"
                  v-model="editForm.estimatedcost"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
        style="position: relative; left: -350px"
      >
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          class="title"
          @click="submitForm"
          v-if="this.isAdd"
          >保存并且新增</el-button
        >
        <el-button
          v-if="this.isEdit"
          size="small"
          type="primary"
          class="title"
          @click="editFormNew"
          >编辑</el-button
        >
      </div>
      <!-- 招聘职位ID -->
    </el-dialog>
    <el-dialog title="请选择培训课程" width="50%" :visible.sync="selectWindow">
      <el-table
        :data="courseGetSelect"
        @selection-change="courseSelectionChange"
        height="380px"
      >
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column sortable prop="id" label="ID" width="90">
        </el-table-column>
        <el-table-column sortable prop="classid" label="课程ID" width="90">
        </el-table-column>
        <el-table-column sortable prop="classname" label="课程名称" width="100">
        </el-table-column>
        <el-table-column sortable prop="classtype" label="课程类别" width="140">
        </el-table-column>
        <el-table-column sortable prop="traintime" label="培训课时" width="130">
        </el-table-column>
        <el-table-column sortable prop="examethod" label="考核方法" width="100">
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="positonExcel">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      isAdd: false,
      isEdit: false,
      formInline: {
        page: 1,
        limit: 2,
        classtype: "",
        examethod: "",
        classname: "",
      },
      needid: "",
      visible: false, // 显示下拉窗
      editFormVisible: false, //控制编辑页面显示与隐藏
      selectWindow: false, //控培训课程ID页面的显示与隐藏
      text: "",
      courseSelect: [], //选择后的数据
      hostdepartment: [], //组织
      defaultProps: {
        children: "children",
        label: "organizationName",
      }, //组织
      courseGetSelect: [], //获取课程ID页面的数据
      title: "添加",
      editFormTwo: {},
      departmentidNew: "",
      editForm: {
        tranid: "", //需求ID
        priority: "", //优先级
        classname: "", //课程名称
        traintime: "", //预计课时
        personscope: "", //人员范围
        description: "", //培训需求描述
        organizationName: "", //招聘组织名称
        departmentid: "", //所属部门
        proposedtime: "", //提出时间
        cid: "", //课程id
        classid: "", //课程ID编码
        trainmethod: "", //培训方法
        peponum: "", //培训人数
        estimatedcost: "", //预计花费
      },
      // 逻辑删除招聘渠道
      seletedata: {
        ids: "",
      },
      rules: {
        personscope: [
          { required: true, message: "请选择人员范围", trigger: "blur" },
        ],
        organizationName: [
          { required: true, message: "请选择所属组织", trigger: "blur" },
        ],
        proposedtime: [
          { required: true, message: "请填写提出时间", trigger: "blur" },
        ],
        cid: [{ required: true, message: "请选择培训课程ID", trigger: "blur" }],
        peponum: [
          { required: true, message: "请选择培训课程ID", trigger: "blur" },
        ],
        estimatedcost: [
          { required: true, message: "请填写预计费用", trigger: "blur" },
        ],
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 2,
        total: 10,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  //启动时加载
  created() {
    this.getdata(this.formInline);
    this.setdepartment();
  },
  watch: {
    editFormVisible(editFormVisible, old) {
      if (!editFormVisible) {
        this.isAdd = false;
        this.isEdit = false;
        // this.editForm=[]
      }
    },
  },
  methods: {
    editFormMethon() {
      this.isEdit = true;
    },
    editFormNew() {
      this.editFormVisible = true;

      this.$axios.put("/train-need/update", this.editForm).then((res) => {
        console.log(res);
        if (res.code == 200) {
          //修改成功后在刷新页面
          this.getdata(this.formInline);
          this.$message({
            type: "success",
            // message:"用户修改成功"
          });
          //关闭修改框
          this.editFormVisible = false;
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
          //关闭修改框
          this.editFormVisible = false;
        }
      });
    },
    // 编辑、增加页面保存方法
    submitForm() {
      this.editFormVisible = true;
      //  this.$axios
      //   .post("/train-need/needAdd", this.editForm)
      //   .then((res) => {
      //     console.log(res);
      //     if (res.code == 200) {
      //       this.getdata(this.formInline);
      //       this.$message({
      //         type: "success",
      //         // message:"添加成功"
      //       });
      //       this.editFormVisible = false;
      //     } else {
      //       this.$message({
      //         type: "info",
      //         message: res.msg,
      //       });
      //       this.editFormVisible = false;
      //     }
      //   })

      this.editForm.departmentid = this.departmentidNew;
      this.postRequest("/train-need/needAdd", this.editForm).then((resp) => {
        if (resp) {
          this.getdata(this.formInline);
          this.$message({
            type: "success",
            message: "添加成功",
          });
          this.editFormVisible = false;
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.organizationName.indexOf(value) !== -1;
    },

    CourseMethod() {
      this.selectWindow = true;
      this.$axios.get("/course/findAll").then((res) => {
        if (res.code == 200) {
          console.log(res.obj);
          this.courseGetSelect = res.obj;
        }
      });
    },

    positonExcel() {
      if (this.courseSelect.length < 1) {
        this.$message.error("请选择培训课程！");
        return false;
      }
      if (this.courseSelect.length > 2) {
        this.$message.error("请选择一个培训课程！");
        return false;
      }
      if (this.courseSelect.length == 2) {
        this.$message.error("请选择一个培训课程！");
        return false;
      }
      this.selectWindow = false;
      console.log(this.courseSelect);

      this.editForm.cid = this.courseSelect[0].id;
      this.editForm.classid = this.courseSelect[0].classid;
      this.editForm.departmentid = this.courseSelect[0].departmentid;
      this.editForm.classname = this.courseSelect[0].classname;
      this.editForm.traintime = this.courseSelect[0].traintime;
      this.editForm.examethod = this.courseSelect[0].examethod;
    },
    //选中培训需求的数据
    courseSelectionChange(val) {
      this.courseSelect = val;
    },
    //组织结构
    // getdepartment(command) {
    //   console.log("111",command)
    //   this.editForm.departmentid = command;
    // },
    //发送请求得到后端组织结构
    setdepartment() {
      if (!window.sessionStorage.getItem("hotdepartment")) {
        this.$axios.get("/recuitmentNeed/findDepartId/").then((res) => {
          if (res) {
            this.hostdepartment = res;
            window.sessionStorage.setItem("hotdepartment", JSON.stringify(res));
          }
        });
      } else {
        this.hostdepartment = JSON.parse(
          window.sessionStorage.getItem("hotdepartment")
        );
      }
    },
    // 获取当前日期的方法
    getProjectNum() {
      const projectTime = new Date(); // 当前中国标准时间
      const Year = projectTime.getFullYear(); // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1; // 获取中国区月份
      const Day = projectTime.getDate(); // 获取几号
      var CurrentDate = Year;
      if (Month >= 10) {
        // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month;
      } else {
        CurrentDate += "0" + Month;
      }
      if (Day >= 10) {
        CurrentDate += Day;
      } else {
        CurrentDate += "0" + Day;
      }
      return CurrentDate;
    },
    // 查询全部
    getdata(parameter) {
      this.loading = true;
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 5,
      };
      this.loading = false;
      this.pageparm.currentPage = this.formInline.page;
      this.pageparm.pageSize = this.formInline.limit;
      // 模拟数据结束

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */

      this.$axios
        .post(
          "/train-need/find/" +
            this.pageparm.currentPage +
            "/" +
            this.pageparm.pageSize,
          this.formInline
        )
        .then((res) => {
          console.log(res);
          this.loading = false;
          if (res.code == 200) {
            this.listData = res.obj.records;
            this.pageparm.currentPage = res.obj.current;
            this.pageparm.pageSize = res.obj.size;
            this.pageparm.total = res.obj.total;

            console.log(this.listData);
          } else {
          }
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage;
      this.formInline.limit = parm.pageSize;
      this.getdata(this.formInline);
    },
    // 搜索事件npm
    search() {
      this.getdata(this.formInline);
    },
    handlAdd() {
      this.editFormVisible = true;
      this.editForm.tranid =
        "TN" + (this.getProjectNum() + Math.floor(Math.random() * 10000));
      this.text = "";
      this.editForm.priority = "";
      this.editForm.classname = "";
      this.editForm.cid = "";
      this.editForm.traintime = "";
      this.editForm.personscope = "";
      this.editForm.description = "";
      this.editForm.proposedtime = "";
      this.editForm.examethod = "";
      this.editForm.peponum = "";
      this.editForm.estimatedcost = "";
      this.editForm.addOr = "add";
      this.editForm.departmentid = "";
      this.isAdd = true;
    },
    // //显示编辑界面
    handleEdit: function (index, row) {
      this.editFormVisible = true;
      this.isEdit = true;
      this.editForm = row;

      console.log(this.editForm.tranid);
      //   if (row != undefined && row != "undefined") {
      //     console.log(row);
      //     this.title = "修改";
      //     this.editForm.tranid = row.tranid;
      //     this.editForm.id = row.id;
      //     this.editForm.tranid = row.tranid;
      //     this.text = row.organizationName;
      //     this.editForm.priority = row.priority;
      //     this.editForm.classname = row.classname;

      //     this.editForm.cid = row.cid;
      //     this.editForm.traintime = row.traintime;
      //     this.editForm.personscope = row.personscope;
      //     this.editForm.description = row.description;

      //     this.editForm.proposedtime = row.proposedtime;

      //     this.editForm.examethod = row.examethod;
      //     this.editForm.peponum = row.peponum;
      //     this.editForm.estimatedcost = row.estimatedcost;

      //     this.editForm.addOr = "edit";
      //   } else {
      //     this.title = "添加";

      //     this.editForm.tranid = "TN" + (this.getProjectNum() + Math.floor(Math.random() * 10000));
      //     this.text = "";
      //     this.editForm.priority = "";
      //     this.editForm.classname = "";
      //     this.editForm.cid = "";
      //     this.editForm.traintime = "";
      //     this.editForm.personscope = "";
      //     this.editForm.description = "";
      //     this.editForm.proposedtime = "";
      //     this.editForm.examethod = "";
      //     this.editForm.peponum = "";
      //     this.editForm.estimatedcost = "";
      //     this.editForm.addOr = "add";
      //     this.editForm.departmentid= "";
      //   }
    },
    // 获取当前日期的方法
    getProjectNum() {
      const projectTime = new Date(); // 当前中国标准时间
      const Year = projectTime.getFullYear(); // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1; // 获取中国区月份
      const Day = projectTime.getDate(); // 获取几号
      var CurrentDate = Year;
      if (Month >= 10) {
        // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month;
      } else {
        CurrentDate += "0" + Month;
      }
      if (Day >= 10) {
        CurrentDate += Day;
      } else {
        CurrentDate += "0" + Day;
      }
      return CurrentDate;
    },

    flush() {
      (this.formInline.classtype = ""),
        (this.formInline.classname = ""),
        (this.formInline.examethod = ""),
        this.getdata(this.formInline);
    },

    // 删除公司
    deleteUser(index, row) {
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete("/train-need/detele/" + row.id)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.message,
                });
                //重新渲染列表
                this.getdata(this.formInline);
              } else {
                this.$message({
                  type: "success",
                  message: res.message,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("用户删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },

    clear() {
      this.$refs.tree.setCurrentKey(null);
      this.text = "";
    },
    treeFilter(val) {
      this.visible = true;
      this.$refs.tree.filter(val);
      if (val == "") {
        this.$refs.tree.setCurrentKey(null);
      }
    },
    // 下拉框关闭
    hidePopover() {
      let node = this.$refs.tree.getCurrentNode();
      this.$refs.tree.filter("");
      if (node) {
        this.text = node.organizationName;
      } else {
        this.text = "";
      }
    },
    // 默认选中
    handelSelect() {
      let node = this.$refs.tree.getNode(this.value);
      if (node) {
        this.$refs.tree.setCurrentKey(this.value);
        this.text = node.organizationName;
      } else {
        this.$refs.tree.setCurrentKey(null);
        this.text = this.value;
      }
    },
    // 点击回调
    handleNodeClick(node) {
      if (node.disable) {
        return false;
      }
      this.visible = false;
      this.text = node.organizationName;
      this.editForm.departmentid = node.id;
      this.departmentidNew = node.id;
      console.log(this.editForm.departmentid);
      this.editForm.organizationName = this.text;
    },
  },
};
</script>

<style scoped lang="less">
.se_input {
  position: relative;
  left: 0px;
  top: 0px;
  width: 190px;
  height: 30px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  text-decoration: none;
  color: #000000;
}
#status_input {
  position: relative;
  left: 20px;
}
.main {
  width: 300px;
  margin: 0 auto;
  .select-tree {
    width: 500px;
    max-height: 350px;
    overflow: auto;
    .el-tree-node.is-current > .el-tree-node__content {
      background: rgba(236, 245, 255, 0.8);
      color: #409eff;
    }
  }
}
</style>